import React from 'react';
import { history } from 'umi';
import './index.less';
import { Button, Input, Form, Row, Col, message } from 'antd';
import request from '@/http';
import SecurityService from '../login/service';

export default function index() {
  const [formObject] = Form.useForm(); //获取数据
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 10 },
    },
  };

  const tailFormItemLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 24,
        offset: 11,
      },
    },
  };

  const onFinish = async (values: any) => {
    await request
      .get(
        '/api/Users/EditPassword?oldPassword='+values.oldPwd+'&newPaswword='+values.newPwd+'&id='+SecurityService.getSecurity().id
      )
      .then((response: any) => {
        if (response.code == 200) {
          SecurityService.DeleteSecurity();
          history.push('/login')
          message.success('密码修改成功，请重新登录！');
        } else {
          formObject.resetFields();
          message.error(response.message);
        }
      });
  };

  return (
    <Row justify="center" style={{ marginTop: '10vh' }}>
      <Col span={22}>
        <Form
          {...formItemLayout}
          form={formObject}
          name="register"
          scrollToFirstError
          onFinish={onFinish}
        >
          <Form.Item
            name="oldPwd"
            label="当前密码"
            rules={[
              {
                required: true,
                message: '不能为空!',
              },
            ]}
            hasFeedback
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            name="newPwd"
            label="新密码"
            rules={[
              { required: true, message: '不能为空!' },
              {
                pattern:
                  /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{6,16}$/,
                message: '只能是6~16位的字符,特殊字符只包括~@#$%*_-+=:,.?[]{}',
              },
            ]}
            hasFeedback
          >
            <Input.Password />
          </Form.Item>

          <Form.Item
            name="conPwd"
            label="请再次输入新密码"
            dependencies={['newPwd']}
            hasFeedback
            rules={[
              {
                required: true,
                message: '不能为空!',
              },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue('newPwd') === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error('两次新密码输入不一致!'));
                },
              }),
            ]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item {...tailFormItemLayout}>
            <Button type="primary" htmlType="submit" style={{ margin: 30 }}>
              确认提交
            </Button>
            <Button
              type="primary"
              onClick={() => {
                formObject.resetFields();
              }}
            >
              取消
            </Button>
          </Form.Item>
        </Form>
      </Col>
    </Row>
  );
}
